<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--避免使用id，class选择器-->
  <style>
  /*div下的第一个子元素*/
  /*div p:first-child{*/
  /*    background: #a24fff;*/
  /*  }*/
  /* 定位到最后一个元素*/
  body  :last-child{
    background: #b5cec9;
  }

  /*ul下的li的最后子元素*/
  ul li:last-child{
    background: #02ff00;
  }

  /*选中p1：定位到父元素，选择当前的第一个p元素
    如果第一个不是p，则不显示
  */
  div:nth-child(1){
    background: #32dc92;
  }
  /*选中a2：定位到父元素，选择当前的第二个a元素*/
  div a:nth-of-type(2){
    background: red;
  }

  a:nth-child(3){
    background: green;
  }



  /*选择提示*/
  a:hover{
    background: brown;
  }

  </style>
</head>
<body>
<a href="../类选择器/classHtml.html">classHtml</a>
  <div>
    <a href="asd">afirst a1</a>
    <p>pfirst p1</p>
    <a href="asdas">a2</a>
    <p>p2</p>
    <div>div1</div>
    <div>div2</div>


    <a href="last">alast</a>
    <p>plast</p>
  </div>
<div>
 <p>div2p1</p>
</div>

  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>


  </ul>

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>
</body>
</html>